<template>
    <el-card class="box-card" style="width: 250px">
        <div slot="header" class="clearfix" style="height: 36px">
            <span style="font-weight: bolder">物业实体信息</span>
        </div>
        <div class="text item">
            <el-button-group>
                <el-button type="primary" size="mini">添加</el-button>
                <el-button type="success" size="mini">修改</el-button>
                <el-button type="danger" size="mini">删除</el-button>
            </el-button-group>
            <div class="tree-container" style="overflow: auto !important;height: 510px">
                <el-tree :data="data" :default-expand-all="true" :props="defaultProps" @node-click="handleNodeClick" class="tree" highlight-current :expand-on-click-node="false">
                    <span class="custom-tree-node" slot-scope="{node, data}">
                        <span>
                            <img class="my-icon" v-if="hasChildren(node)" src="../../../assets/img/dir.svg" alt=""/>
                            <img class="my-icon" v-else src="../../../assets/img/file.svg" alt=""/>
                            <span>{{node.label}}</span>
                        </span>
                    </span>
                </el-tree>
            </div>
        </div>
    </el-card>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "route-type",
        data() {
            return {
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                }
            }
        },
        methods: {
            hasChildren(node) {
                return node.level !== 2;
            },
            handleNodeClick(data, node) {
                if (node.level === 1)
                    this.$emit('tree-node-click', data, node, this.data);
            },
            getMenus() {
                axios.get('http://gulimall.com/api/inspection/route/listWithProperty').then(
                    response => {
                        console.log(response.data.data);
                        this.data = response.data.data;
                    },
                    error => {
                        console.log('获取物业信息实体出现错误');
                    }
                );
            }
        },
        activated() {
            this.getMenus();
        }
    }
</script>

<style scoped>
    .my-icon {
        width: 17px;
        height: 17px;
    }

    .el-button-group .el-button {
        margin-left: 10px;
    }

    .el-button-group {
        margin-bottom: 15px;
    }

    .el-card {
        height: 750px;
    }

    /* 树形结构节点添加连线 */
    .tree /deep/ .el-tree-node {
        position: relative;
        padding-left: 16px;
    }

    .tree /deep/ .el-tree-node__children {
        padding-left: 16px;
    }

    .tree /deep/ .el-tree-node :last-child:before {
        height: 38px;
    }

    .tree /deep/ .el-tree > .el-tree-node:before {
        border-left: none;
    }

    .tree-container /deep/ .el-tree > .el-tree-node:after {
        border-top: none;
    }

    .tree /deep/ .el-tree-node:before {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .tree /deep/ .el-tree-node:after {
        content: "";
        left: -4px;
        position: absolute;
        right: auto;
        border-width: 1px;
    }

    .tree /deep/ .el-tree-node__expand-icon.is-leaf {
        display: none;
    }

    .tree /deep/ .el-tree-node:before {
        border-left: 1px dashed #b8b9bb;
        bottom: 0;
        height: 100%;
        top: -26px;
        width: 1px;
    }

    .tree /deep/ .el-tree-node:after {
        border-top: 1px dashed #b8b9bb;
        height: 20px;
        top: 12px;
        width: 24px;
    }

    .treeLine /deep/ .el-tree-node[tabindex^="0"]:before {
        border-left: none !important;
    }

    .tree-container /deep/ .el-tree-node__expand-icon {
        display: none;
    }
</style>
